import {IRightData,IAntdMenuItem} from '@/types/auth'
import * as icons from '@ant-design/icons'
import React from 'react'
import { RouteObject } from 'react-router-dom'
import withLoadable from './loadable'
/**
 * 将权限数据转成AntdMenu结构数据
 */
export const tranfromRightMenuToMenu=(list:Array<IRightData>)=>{
    return list.map(item=>{
        let menuItem:IAntdMenuItem
        //判断有icon图标
        if(item.icon){
            //keyof的作用是将一个对象中的key联合起来作为一个新的类型
            const iis:any=icons[item.icon as keyof typeof icons]
            menuItem={
                label:item.title,
                key:item.path,
                icon:React.createElement(iis)
            }
        }else{
            menuItem={
                label:item.title,
                key:item.path
            }
        }
        if(item.children&&item.children.length>0){
            menuItem.children=tranfromRightMenuToMenu(item.children)
        }
        return menuItem
    })
}
/**
 * 将权限数据转成RouteObject结构数据
 */

export const tranfromRightToRoute=(list:Array<IRightData>)=>{
    let routes:Array<RouteObject>=[]
    list.forEach(item=>{
       if(item.children&&item.children.length>0){
          item.children.forEach(subItem=>{
             console.log(subItem);
             const Modual=withLoadable(()=>import(`@/views${subItem.path}`))
             let routeItem:RouteObject={
                path:subItem.path.substring(1),
                element:<Modual/>
             }
             routes.push(routeItem)
          })
       }
    })
   return routes
}
